.ub-video-container {
    background: #1b1e32;
}

.ub-video {
    background: #1b1e32;

    .player {
        padding: 0.5rem 0;
        text-align: center;
        width: 100%;
        position: relative;
        overflow: hidden;

        &:after {
            content: '';
            display: block;
            margin-top: 50%;
        }

        #player {
            margin: 0 auto;
            max-width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%
        }
    }
}

@media screen and (max-width: 40rem) {
    .ub-video {
        .player {
            &:after {
                margin-bottom: 60%;
            }
        }
    }
}

.ub-video-info {
    background: #FFF;
    border-radius: var(--size-radius);
    padding: var(--size-margin);

    .h1 {
        font-size: var(--font-size-large);
    }

    .stat {
        margin-top: var(--size-margin);

        a {
            color: #c4cfdb;

            i {
                display: inline-block;
                width: 1em;
                text-align: center;
            }

            &:hover {
                color: #333;
            }
        }
    }

    .summary {
        margin-top: var(--size-margin, 0.5rem);
        color: #c4cfdb;
    }
}
